<template>
  <div  v-loading="loading">
    <div class="block" style="margin-bottom: 10px">
      <el-date-picker
          v-model="value2"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
      </el-date-picker>
      <el-button @click="findByTime">查找</el-button>
    </div>
    <el-table
        :data="tableData"
        show-summary
        style="width: 100%">
      <el-table-column
          prop="dishName"
          label="菜品名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="dishType"
          label="菜品类型">
      </el-table-column>
      <el-table-column
          prop="fat"
          sortable
          label="脂肪(克)">
      </el-table-column>
      <el-table-column
          prop="carbohydrates"
          sortable
          label="碳水化合物(克)">
      </el-table-column>
      <el-table-column
          prop="protein"
          sortable
          label="蛋白质(克)">
      </el-table-column>
      <el-table-column
          prop="heat"
          sortable
          label="热量(千卡)">
      </el-table-column>
      <el-table-column
          prop="time"
          sortable
          label="记录时间">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import request from "@/utils/request";
import store from "@/store";
const username = store.state.app.username
export default {
  data() {
    return {
      tableData: [{}],
      loading : true,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: '',
      pickdata: {
        startTime: '',
        endTime: '',
      },
    }
  },
  methods: {
    getSummaries(param) {
      const {columns, data} = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += ' 元';
        } else {
          sums[index] = 'N/A';
        }
      });

      return sums;
    },
    findByTime() {
      this.pickdata.startTime = this.value2[0]
      this.pickdata.endTime = this.value2[1]
      request.get('dish/findByTime', {
        params: {
          startTime: this.pickdata.startTime,
          endTime: this.pickdata.endTime,
          username: username
        }
      })
          .then(res => {
            this.tableData = res.data.data
          }).catch(error => {
        console.log(error)
      })
    }
  },
  mounted() {
    request.get('dish/getDishRecord/' + username)
        .then(res => {
          this.tableData = res.data.data
          this.loading = false
        }).catch(error => {
      console.log('error', error)
    })
  }
}
</script>
<!-- <style scoped>
.el-table{
   font-weight:bolder;
   font-size: 20px; /* 调整字体大小为16像素，根据需要调整 */
 }
</style> -->
